<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link href="/css/header_and_nav.css" rel="stylesheet">
    <link href="/css/home.css" rel="stylesheet">
    <script src="/js/marked.js"></script>
</head>
<body>
    <header th:include="header :: copy"></header>
    <nav th:include="nav :: my_nav" class="my_nav"></nav>

    <div class="container">
        <div class="personal_info">
            <div class="personal_info_text">
                <h3 th:text="${userInformation.name}"></h3>
                <p>
                    <span th:text="${userInformation.email}"></span>
                    <span>|</span>
                    <span th:text="${userInformation.phone}"></span>
                </p>
                <p>
                    <span th:text="${userInformation.school}"></span>
                    <span>|</span>
                    <span th:text="${userInformation.major}"></span>
                </p>
                <p>
                    <span>绩点：</span>
                    <span th:text="${userInformation.gpa}"></span>
                    <span>/4.00</span>
                </p>
            </div>
            <div class="personal_avatar">
                <img th:src="${userInformation.avatar}" alt="头像">
            </div>
        </div>
        <div class="project_info">
            <h1>教育经历</h1>
            <hr>
            <ul class="project_list">
                <li th:each="education : ${educations}">
                    <h3>
                        <span th:text="${education.school}"></span>
                    </h3>
                    <p>
                        <span>学历：</span>
                        <span th:text="${education.degree}"></span>
                    </p>
                    <p>
                        <span>主修课程：</span>
                        <span th:text="${education.major}"></span>
                    </p>
                    <p>
                        <span>入学时间：</span>
                        <span th:text="${education.startTime}"></span>
                        <span> —— </span>
                        <span th:text="${education.endTime}"></span>
                    </p>
                </li>
            </ul>
        </div>
        <div class="skill_info">
            <h1>技能</h1>
            <hr>
            <ul class="skill_list">
                <li th:each="skill : ${skills}">
                    <span th:text="${skill.name}"></span>
                    <span>: </span>
                    <span th:text="${skill.description}"></span>
                </li>
            </ul>
        </div>
        <div class="project_info">
            <h1>项目经历</h1>
            <hr>
            <ul class="project_list">
                <li th:each="project : ${projects}">
                    <h3>
                        <span th:text="${project.name}"></span>
                        <span> ———— </span>
                        <span th:text="${project.language}"></span>
                    </h3>
                    <div class="project_detail_description">
                        <span th:text="${project.description}" id="content"></span>
                    </div>
                    <p>
                        <span>仓库地址：</span>
                        <span th:text="${project.url}"></span>
                    </p>
                </li>
            </ul>
        </div>
        <div class="project_info">
            <h1>实习经历</h1>
            <hr>
            <ul class="project_list">
                <li th:each="internship : ${internships}">
                    <h3>
                        <span th:text="${internship.company}"></span>
                    </h3>
                    <p>
                        <span>实习时间：</span>
                        <span th:text="${internship.startTime}"></span>
                        <span> —— </span>
                        <span th:text="${internship.endTime}"></span>
                    </p>
                    <div class="project_detail_description">
                        <span th:text="${internship.description}" id="content"></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        const contents = document.querySelectorAll('#content');
        contents.forEach(content => {
            content.innerHTML = marked(content.innerText);
        });
    </script>
</body>
</html>
